<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>根组件</h3>
        <comp-a></comp-a>
        <comp-b></comp-b>
        <global-comp-a></global-comp-a>
    </div>
</body>
<script>
    Vue.component("GlobalCompA",{
        template:`
            <h5 style='color:red'>
                GlobalCompA组件
            </h5>
        `
    });
    // Vue.component("GlobalCompA",{
    //     template:`
    //         <h5 style='color:red'>
    //             GlobalCompA组件
    //             <global-comp-b></global-comp-b>
    //         </h5>`
    // });
    Vue.component("GlobalCompB",{
        template:`
            <h5 style='color:red'>
                GlobalCompB组件
                <global-comp-a></global-comp-a>
            </h5>
        `
    });


    const CompD = {
        template:`
            <div itany="compD">
                <h3>CompD组件</h3>
                <global-comp-a></global-comp-a>
            </div>
        `
    }
    const CompB = {
        template:`
            <div itany="compB">
                <h3>CompB组件</h3>
                <hr>
                <global-comp-a></global-comp-a>
                <comp-d></comp-d>
                <hr>
            </div>
        `,
        components:{
            CompD
        }
    }


    new Vue({
        el:"#app",
        components:{
            CompA:{
                template:`
                    <div itany="compA">
                        <h3>CompA组件</h3>
                        <hr>
                        <global-comp-a></global-comp-a>
                        <comp-c></comp-c>
                        <hr>
                    </div>
                `,
                components:{
                    CompC:{
                        template:`
                            <div itany="compC">
                                <h3>CompC组件</h3>
                                <global-comp-a></global-comp-a>
                            </div>
                        `,
                    }
                }
            },
            CompB:CompB
        }
    })
</script>
</html>